import { Button, Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/lib/table';
import Add from "../component/Addlight"
import productlights from '../model/productlight/productlights';
import React, { useState, useEffect } from 'react';
interface DataType {
    _id: any,
    productlight: any;
}
const App: React.FC = () => {

    const columns: ColumnsType<DataType> = [
        {
            title: '产品颜色',
            dataIndex: 'productlight',
            key: 'productlight',
            render: text => <a>{text}</a>,
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record: any) => (
                <Space size="middle">
                    <Button onClick={() => {
                        delLisyById(record._id);
                    }}>删除</Button>
                </Space>
            ),
        },
    ];


    let [datas, setData] = useState<Array<any>>([])
    useEffect(() => {
        async function asyncfunction() {
            let { data } = await productlights.query({})
            setData(datas = data.msg)
        }
        asyncfunction()
    }, [])


    let delLisyById = async (id: any) => {
        setData(datas.filter(item => item._id !== id));
    }
    return <div>
        <Add></Add>
        <Table columns={columns} dataSource={datas} /></div>
};

export default App;